<template>
    <p>
        <span>
            <input type="checkbox" id="all" v-model="isAll">
            <label for="all">全选</label>
        </span>
        <button @click="onReverse">反选</button>
    </p>
    <ul>
        <li v-for="item, index in planList" :key="item.id">
            <input type="checkbox" v-model="item.done">
            <span :class="{ completed: item.done }">{{ item.name }}</span>
        </li>
    </ul>
</template>

<script setup>
    import { ref, computed } from 'vue';

    const isAll = computed({
        get() {
            return planList.value.every(item => item.done)
        },
        set(val) {
            planList.value.map(item => item.done = val ? true : false)
        }
    })

    const onReverse = () => {
        planList.value.map(item => item.done = !item.done)
    }

    const planList = ref([
        { id: 12, name: '跑步', done: false },
        { id: 76, name: '看书', done: false },
        { id: 31, name: '撸码', done: false },
        { id: 49, name: '追剧', done: false }
    ])
</script>

<style lang="scss">
* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

#app {
    width: 400px;
    margin: 100px auto;
    background-color: plum;
    padding: 14px 12px;

    p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        height: 50px;
        padding: 12px 0px 2px 0px;


        button {
            padding: 2px 3px;
        }
    }

    ul li {
        display: flex;
        justify-content: space-between;
        padding: 12px 0px 2px 0px;
        border-bottom: 1px solid #ccc;
        span.completed {
            color: #ccc;
            text-decoration:line-through;
        }
    }
}
</style>